<template>
  <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
  <li :class="todo.done ? 'completed' : ''">
    <div class="view">
      <input
        class="toggle"
        type="checkbox"
        :checked="todo.done"
        @change="() => checkTodo(todo.id)"
      />
      <label>{{ todo.todo }}</label>
      <button @click="del(todo.id)" class="destroy"></button>
    </div>
  </li>
</template>

<script>
export default {
  name: "ItemT",
  components: {},
  props: {
    todo: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    del(id) {
      // return this.delTodo(id);
      return this.$bus.$emit("delTodo", id);
    },
    checkTodo(id) {
      // this.changeTodo(id);
      this.$bus.$emit("changeTodo", id);
    },
  },
};
</script>

<style scoped></style>
